import React from 'react';
import {Dimensions, Platform, StyleSheet} from 'react-native';
import colors from "../../styles/colors";

const {width, height} = Dimensions.get('window');

const styles = StyleSheet.create({
  scrollContainer: {
    flex: 1,
    backgroundColor: colors.white
  },
  container: {
    flex: 1,
    backgroundColor: colors.backgroundGray,
  },
  homeTopContainer: {
    backgroundColor: colors.white,
    width: width,
    marginBottom: 10
  },
  bannerContainer: {
    width: width,
    height: (width - 30) * 0.43
  },
  bannerImage: {
    width: width - 30,
    height: (width - 30) * 0.43,
    borderRadius: 4,
    alignSelf: 'center'
  },
  noticeContainer: {
    width: width,
    height: 46
  },
  noticeInner: {
    flex: 1,
    overflow: 'hidden',
    marginLeft: 15,
    marginRight: 15,
    borderBottomWidth: 1,
    borderBottomColor: colors.borderGray,
    flexDirection: 'row'
  },
  noticeIcon: {
    width: 20,
    ...Platform.select({
      ios: {lineHeight: 45},
      android: {textAlignVertical: 'center'}
    })
  },
  noticeList: {
    flex: 1
  },
  noticeText: {
    height: 45, fontSize: 12, color: colors.darkTextGray,
    ...Platform.select({
      ios: {lineHeight: 45},
      android: {textAlignVertical: 'center'}
    })
  },
  tickerShowContainer: {
    width: width,
    height: 118
  },
  tickerShowInner: {
    flexDirection: 'row',
    height: 118
  },
  tickerShowTouch: {
    flex: 1,
    backgroundColor: colors.white
  },
  tickerShowBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  tickerShowText1: {
    color: colors.darkTextGray,
    fontSize: 12
  },
  tickerShowText2: {
    fontSize: 18
  },
  tickerShowText3: {
    fontSize: 12
  },
  tickerShowText4: {
    color: colors.lightTextGray,
    fontSize: 12
  },
  homeBottomContainer: {
    width: width,
    minHeight: 600,
    backgroundColor: colors.white,
    paddingBottom: 30
  },
  homeBottomHeader: {
    backgroundColor: colors.white,
    borderBottomColor: colors.borderGray,
    borderBottomWidth: 1,
    height: 55,
    lineHeight: 55,
    fontSize: 18,
    color: colors.darkTextGray,
    paddingLeft: 15
  },
  tickerListTouch: {
    backgroundColor: colors.white,
    height: 64,
    borderBottomColor: colors.borderGray,
    borderBottomWidth: 1,
    paddingLeft: 15,
    paddingRight: 15,
    overflow: 'hidden'
  },
  tickerListBox: {
    flexDirection: 'row',
    height: 64
  },
  tickerListNumber: {
    justifyContent: 'center',
    width: 28
  },
  tickerListNumberText: {
    fontSize: 16,
    fontStyle: 'italic',
  },
  tickerListData: {
    flex: 1,
    justifyContent: 'center'
  },
  tickerListDataTop: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingBottom: 8
  },
  tickerListTop1: {
    fontSize: 16,
    color: colors.darkTextGray
  },
  tickerListTop2: {
    fontSize: 16,
    color: colors.darkTextGray,
    paddingRight: 30
  },
  tickerListDataBottom: {
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  tickerListBottom1: {
    fontSize: 12,
    color: colors.lightTextGray
  },
  tickerListBottom2: {
    fontSize: 12,
    color: colors.lightTextGray,
    paddingRight: 30
  },
  tickerListRate: {
    justifyContent: 'center'
  },
  tickerListRateText: {
    width: 75,
    height: 33,
    borderRadius: 2,
    color: colors.white,
    textAlign: 'center',
    fontSize: 15,
    ...Platform.select({
      ios: {lineHeight: 33},
      android: {textAlignVertical: 'center'}
    })
  }
});

export default styles;